@import "include/setting";

/*聊天窗口*/
.chatbox {display:none;position: fixed;z-index:999;right: 50%;bottom:50% ;width: 730px;height: 510px;margin-right:-365px;margin-bottom:-255px;background-color: $color-base-bg;text-align: center;
  /*border:  1px solid #f8f8f8;*/
  -webkit-box-shadow: 0 0 10px rgba(7, 0, 2, 0.1);
  -moz-box-shadow: 0 0 10px rgba(7, 0, 2, 0.1);
  box-shadow: 0 0 10px rgba(7, 0, 2, 0.1);
}
.chatbox .hd {position: relative;height: 49px;margin: 0 auto;background-color: #fff;text-align: left;line-height: 40px;border-bottom:1px solid #d9d9d9;}
.chatbox .hd .tt{display:block;padding-left:15px;line-height: 48px;font-size: 18px;color: #1a1a1a;
 @include text-overflow;
}
.chatbox .hd .min,
.chatbox .hd .close {position: absolute;width: 17px;height: 17px;right: 12px;top: 12px;font-size: 15px;line-height: 17px;text-align: center;cursor: pointer; color: #333;font-style: normal;opacity: 1;
}
.chatbox .hd .close:hover,
.chatbox .hd .min:hover{color: #ccc;}
.chatbox .hd .min {right: 36px;}
.chatbox .bd {margin:0;}
.chatbox .name{display:block;padding-top:30px;margin:0 10px 0 30px;color: #1a1a1a;font-size:14px;text-align: left;
 @include text-overflow;
}
.chatbox .sex{color:#1a1a1a;padding-top:10px;margin:0 10px 0 30px;text-align: left;}
.chatbox .country{color:#1a1a1a;padding-top:10px;margin:0 10px 0 30px;text-align: left;}
.chatbox .province{color:#1a1a1a;padding:10px 0 0;margin:0 10px 0 30px;text-align: left;}
.chatbox .bd .mn{float:left;width: 100%;}
.chatbox .bd .mnc{float:left;width:450px;height:460px;margin-right:140px;background-color: #fff;}
.chatbox .bd .sd{position: relative;float:right; width: 140px;margin-left:-140px;}
.chatbox .bd .msg-list {position: relative;width:100%;height:310px;overflow:auto;padding:0 -15px 0 0;margin:0;}
.chatbox .msg-list ul{margin:0; padding:0 25px 0 15px;}
.chatbox .msg-list li{float: left;width: 100%;margin: 10px 0;list-style: none;}
.chatbox .msg-list .timeline {text-align: center;color: #7d7d7d;font-size: 12px;line-height: 20px;}
.chatbox .msg-list .avatar {position:relative;top:-4px;display: inline-block;width: 32px;height: 32px;
  line-height: 32px;
  font-size: 15px;
  background-color: #e8e8e8;
  color: #fff;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px
}
.chatbox .msg-list .avatar img {width: 100%;height: 100%;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px
}
.chatbox .ask .content,
.chatbox .answer .content { min-height: 20px;padding:6px 10px;text-align: left;word-break: break-all;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.chatbox .ask .content img,
.chatbox .answer .content img {
  max-width:100%;
}
.chatbox .bd .ask {}
.chatbox .ask .avatar { float: left; margin-right:-32px;}
.chatbox .ask .content {position: relative; float: left; margin-left: 49px;margin-right: 50px;background-color: #fff;border:1px solid #bfbfbf;}
.chatbox .ask .content:before { position: absolute; left: -6px; top: 8px; display: inline-block;*zoom:1; *display: inline;
  width:6px;height:6px;background: url("../images/chat/arrow.png") no-repeat 0 0;
  vertical-align: middle;
  //border-style: solid;
  //border-color: transparent #ebebeb transparent transparent;
  //border-width: 10px 10px 10px 0;
  content: "";
}

.chatbox .bd .answer {}
.chatbox .answer .avatar { float: right; margin-left: -32px;}
.chatbox .answer .content {position: relative;float: right;margin-right: 49px;margin-left: 50px;background-color: #26c5d8;border:1px solid #1da4b4;}
.chatbox .answer .content:after {position: absolute;right: -6px;top: 8px;display: inline-block;*zoom:1; *display: inline;
  width:6px;height:6px;background: url("../images/chat/arrow.png") no-repeat -6px 0;
  vertical-align: middle;
  //border-style: solid;
  //border-color: transparent transparent transparent #ebebeb;
  //border-width: 10px 0 10px 10px;
  content: "";
}
.chatbox .bottom {width: 100%;}
.chatbox .bottom .form {padding: 0;}
.chatbox .button {float: left;width: 52px;height: 35px;margin-left: 0px; border: 0;color: #fff; background-color: #00acee;
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
}
.chatbox .ipt {text-align: left;margin:0 10px;line-height: 20px;vertical-alip:top;}
.chatbox .ipt input {height: 68px; width: 100%;text-indent: 5px;margin-left: 0px;
  border: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;}
.chatbox .ipt input:focus{outline: none;}
.chatbox .send {margin:0 10px;text-align:right;}
.chatbox .send span{color: #ccc;padding-right:20px;}
.chatbox .insert {position: relative;height: 40px;border-top:1px solid #f3ece5;}
.chatbox .insert i{position:relative;top:9px; left:15px; display: block;width: 22px;height: 22px;
  content: "";
  background:url("../images/icon-balloon.png") no-repeat -220px -53px;cursor: pointer;
}
/*tab*/
.chatbox .tab-hd{position: relative;float:left; width: 140px;height:510px;margin-right:-140px;overflow-y:auto;}
.chatbox .tab-hd a{position:relative;display:block;margin:5px 10px;line-height:48px;color: #1a1a1a;font-size: 14px;text-decoration:none;text-align: left;
 @include text-overflow;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.chatbox .tab-hd a:first-child{
  -webkit-border-radius: 2px 0  0 0;
  -moz-border-radius: 2px 0  0 0;
  border-radius: 2px 0  0 0;}
.chatbox .tab-hd a.active{background-color: $color-chat-thin;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.chatbox .tab-hd a:hover{background-color: $color-chat-hover;}
.chatbox .tab-hd .close{display:none;position: absolute;opacity:1;width: 17px;height: 17px;right: 12px;top: 12px;font-size: 15px;line-height: 17px;background-color: #000;text-align: center;cursor: pointer; color: #fff;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;}
.chatbox .tab-hd a:hover .close{display:block;}
.chatbox .tab-hd .avatar {position:relative;display: inline-block;width:32px;height: 32px;margin-right:10px;margin-left:6px;text-align:center;
  line-height: 32px;
  font-size: 14px;
  background-color: #e8e8e8;
  color: #fff;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px
}
.chatbox .tab-hd .avatar img {width: 32px;height: 32px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px
}
.chatbox .tab-wrap{float:right;width: 100%;}
.chatbox .tab-bd{margin-left:140px;height:510px;background-color: #fafafa;}

/*message alert*/
.chat-msg{position: fixed;bottom:10px; right:25px; width:65px; height: 65px;text-align: center;
  background-color: #fff;cursor: pointer;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 7px rgba(7,0,2,.2);
  -moz-box-shadow: 0 0 7px rgba(7,0,2,.2);
  box-shadow: 0 0 7px rgba(7,0,2,.2);
}
.chat-msg .num{position:absolute;top:-16px;left:-16px;display:block;margin:8px 0 0 4px;width: 20px; height: 20px;line-height: 16px;background-color: $color-base;color:#fff;border:2px solid #fff;text-align: center;
  font-size: 13px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;}
.chat-msg .icon{ display:block;width: 46px;height: 46px;margin:12px 0 0 12px;background:url("../images/icon-balloon.png") no-repeat -210px -83px;cursor: pointer;}
.chat-msg .icon.active{
  -webkit-animation: flipinY 1s infinite;
  -o-animation: flipinY 1s infinite;
  animation: flipinY 1s infinite;
}
.chat-msg.z-dis .icon{
  background-position: -210px -135px;
}
.chat-msg.z-dis .num{background-color: #999;}
/*face*/
.face{display: none;position: absolute;z-index:999;bottom:31px;left:0px;width: 400px;padding: 0px 0px;background: #fff none repeat scroll 0 0;border: 1px solid #CCCCCC;text-align: left;margin: 0px 0px;}
.face .face-tt {height: 28px;margin: 0px 0px;padding: 0;background: #F0F0F0;}
.face .close {position: absolute; right: 14px; top: 5px;height: 19px; width: 19px; z-index: 99; display: block;background: url("../images/chat/close.gif") no-repeat scroll transparent;cursor: pointer;}
.face .face-bd {width: 367px;margin: 10px 15px 20px; border-top: 1px solid #e8e8e8;border-left: 1px solid #e8e8e8;}
.face .list ul {background: #fff;margin: 0px 0px;padding: 0;}
.face .list li {float: left;padding: 4px;background: #fff;border-right: solid 1px #e8e8e8;border-bottom: solid 1px #e8e8e8;overflow: hidden;cursor: pointer;box-sizing: border-box;}
.face .list img {float:left;display: block;width: 52px;height:52px;line-height: 22px;background: #fff;}
.face .list li:hover {margin-left: -1px;margin-top: -1px;border: 1px solid #0095cd;}

/*群聊*/
.chatbox .calendar{margin:25px 10px 27px;background: url("../images/chat/calendar.png") no-repeat;}
.chatbox .calendar .create{padding-left:42px;color: #959697;font-size:14px;}
.chatbox .calendar .at{padding-left:42px;color: #1a1a1a;font-size:14px;}
.chatbox .group{position: relative;text-align:left;}
.chatbox .group .total{height:20px;width: 100%;background: #e1e4e6;color: #333;text-align:left;padding:0 10px;line-height: 20px;font-size: 12px;}
.chatbox .group ul{height:307px;padding:9px 10px 0;margin-bottom:0;overflow-y:auto;overflow-x:hidden;list-style: none;}
.chatbox .group li{position:relative;padding:3px 0;text-align:left;list-style: none;}
.chatbox .group .avatar{position:relative;top:4px;display:inline-block;*zoom:1;*display:inline;width:18px;height:18px;overflow:hidden;margin-right: 6px;
  background: #ccc;color: #fff;text-align: center;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;}
.chatbox .group .avatar img{display:block;width: 100%;height: 100%;}
.chatbox .group  a{display:block;color: #333333;font-size: 12px;
 @include text-overflow;}
.chatbox .add{display:block;height: 42px;line-height: 42px;text-align:center;color: $color-base;background: #e1e4e6;cursor:pointer;}
.chatbox .add i{position:relative;top:4px;display: inline-block;*zoom:1;*diplay:inline;width: 15px;height: 15px;margin-right:2px;background: url("../images/chat/add.png") no-repeat;}
.chatbox .add:hover{background-color: #26c5d8;color: #fff;text-decoration:none;}
.chatbox .group .dropdown{position: absolute;z-index:2;width: 126px;left:0;top:26px;border: 1px solid #d9d9d9;background-color: #fff;}
.chatbox .group .dropdown a{display: block;line-height: 36px;border-top:1px solid #d9d9d9; text-align: center;}
.chatbox .group .dropdown a:first-child{border-top:none;}
.chatbox .group .dropdown a.active,
.chatbox .group .dropdown a:hover{color: #fff;background-color: #26c5d8; text-decoration: none;}

/*--------------------scroll-------------------*/
.rollbar-path-vertical, .rollbar-path-horizontal {position: absolute;z-index: 100;background-color: rgba(220, 220, 220, 0.5);}
.rollbar-path-horizontal {bottom: 5px;height: 10px;left: 0;width: 100%;}
.rollbar-path-vertical {right: 5px;top:0;width: 10px;height: 100%;}
.rollbar-path-vertical {right:0;}
.rollbar-path-horizontal {}
.rollbar-handle {position:relative;left: 0;background-color: #58bcee;top: 0;}
.rollbar-handle {-moz-user-select: none;}
.rollbar-path-vertical .rollbar-handle {height: 20%;width: 100%;}
.rollbar-path-horizontal .rollbar-handle {height: 100%;width: 20%;}
.rollbar-path-vertical, .rollbar-path-horizontal, .rollbar-handle {border-radius: 5px;}


/* 动画 */
@-webkit-keyframes flipinY{
  0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
  40%{-webkit-transform:perspective(400px) rotateY(-10deg);}
  70%{-webkit-transform:perspective(400px) rotateY(10deg);}
  100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}
}
@-moz-keyframes flipinY{
  0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
  40%{-moz-transform:perspective(400px) rotateY(-10deg);}
  70%{-moz-transform:perspective(400px) rotateY(10deg);}
  100%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}
}
@-ms-keyframes flipinY{
  0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}
  40%{-ms-transform:perspective(400px) rotateY(-10deg);}
  70%{-ms-transform:perspective(400px) rotateY(10deg);}
  100%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}
}
@keyframes flipinY{
  0%{transform:perspective(400px) rotateY(90deg);opacity:0;}
  40%{transform:perspective(400px) rotateY(-10deg);}
  70%{transform:perspective(400px) rotateY(10deg);}
  100%{transform:perspective(400px) rotateY(0);opacity:1;}
}